<template>
  <div>
    <el-card class="headNav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>服务管理</el-breadcrumb-item>
        <el-breadcrumb-item>敏感词管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <div class="search">
      <el-input v-model="searchVal"></el-input>
      <el-button type="primary" @click="searchUser">搜 索</el-button>
      <el-button type="primary" @click="getTableData">重置</el-button>
      <el-button type="warning" @click="addSensitiveDialog">新增敏感词</el-button>
    </div>
    <el-card>
      <Table :tHead="tHead" :tBody="tBody" :tButton="tButton">
      </Table>
    </el-card>

    <!-- 新增 -->
    <el-dialog title="新增敏感词" :visible.sync="addVisible" width="30%">
      <el-input type="textarea" :rows="2" placeholder="请输入敏感词" v-model="keyword">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSensitive">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/Table.vue'
import formDate from '@/utils/formDate'
export default {
  name: 'Sensitive',
  components: { Table },
  data () {
    return {
      //表格
      tHead: [
        {
          prop: 'name',
          label: '关键词'
        },
        {
          prop: 'date',
          label: '创建时间'
        },
      ],
      tBody: [],
      tButton: [
        {
          content: '删除',
          type: 'danger',
          method: this.deleteRow
        },
      ],
      searchVal: '',
      addVisible: false,
      keyword: ''
    };
  },
  methods: {
    async getTableData () {
      let res = await this.$axios.get('http://172.16.113.23:8080/service/selectAllSensetive')
      if (res.code !== 200) return null
      res.data.forEach(val => {
        val.date = formDate(val.date, 0)
      })
      this.tBody = res.data
    },
    async deleteRow (row) {
      // let res = await this.$axios.post('http://172.16.113.23:8080/service/fakedelSentive', 1)
      let res = await this.$axios({
        method: 'post',
        url: 'http://172.16.113.23:8080/service/fakedelSentive',
        data: row.id,
        headers: {
          "Content-Type": "application/json"
        }
      })
      console.log(res)
      if (res.code !== 200) return this.$message.error('删除失败!')
      this.$message.success('删除成功!')
      this.getTableData()
    },
    async searchUser () {
      let res = await this.$axios.get('http://172.16.113.23:8080/service/conditionSensetive', {
        params: {
          sensitive: this.searchVal
        }
      })
      if (res.code !== 200) return this.$message.error('查询失败')
      this.tBody = res.data
    },
    addSensitiveDialog () {
      this.addVisible = true
    },
    async addSensitive () {
      console.log(this.keyword)
      if (this.keyword === '') return null
      let res = await this.$axios.post('http://172.16.113.23:8080/service/newSensitive', {
        name: this.keyword
      })
      if (res.code !== 200) return this.$message.error('添加失败!')
      this.$message.success('添加成功!')
      this.getTableData()
      this.addVisible = false
    }
  },
  created () {
    this.getTableData()
  },
  computed: {},
  watch: {},
};
</script>

<style scoped lang="less">
.headNav {
  margin-bottom: 40px;
}
.search {
  width: 700px;
  .el-input {
    width: 200px;
    margin-right: 40px;
  }
}
</style>
